<template>
	<div class="warper">
		<div class="container">
			<div class="row">
				<div class="col-md-7">
					<div class="row">
						<div class="group-list-first">
							<!-- 1 -->
							<div class="group-item group-item-first">
								<router-link to="/personPage?id" class="pr">
									<img src="../assets/images/98CC7795.jpg" alt="" class="img-fluid">
									<p class="name">Naomi Neo</p>
									<div class="txt">
										Influencer • Instagram Influencer • YouTube Content Creator • Blogger
									</div>
									<div class="item-bottom">
										<span>Singapore, Central Singapore</span>
									</div>
								</router-link>
							</div>
							<!-- 2 -->
							<div class="group-item group-item-first">
								<router-link to="/personPage?id" class="pr">
									<img src="../assets/images/98CC7795.jpg" alt="" class="img-fluid">
									<p class="name">Naomi Neo</p>
									<div class="txt">
										Influencer • Instagram Influencer • YouTube Content Creator • Blogger
									</div>
									<div class="item-bottom">
										<span>Singapore, Central Singapore</span>
									</div>
								</router-link>
							</div>
							<!-- 3 -->
							<div class="group-item group-item-first">
								<router-link to="/personPage?id" class="pr">
									<img src="../assets/images/98CC7795.jpg" alt="" class="img-fluid">
									<p class="name">Naomi Neo</p>
									<div class="txt">
										Influencer • Instagram Influencer • YouTube Content Creator • Blogger
									</div>
									<div class="item-bottom">
										<span>Singapore, Central Singapore</span>
									</div>
								</router-link>
							</div>
							<!-- 4 -->
							<div class="group-item group-item-first">
								<router-link to="/personPage?id" class="pr">
									<img src="../assets/images/98CC7795.jpg" alt="" class="img-fluid">
									<p class="name">Naomi Neo</p>
									<div class="txt">
										Influencer • Instagram Influencer • YouTube Content Creator • Blogger
									</div>
									<div class="item-bottom">
										<span>Singapore, Central Singapore</span>
									</div>
								</router-link>
							</div>
							<!-- 5 -->
							<div class="group-item group-item-first">
								<router-link to="/personPage?id" class="pr">
									<img src="../assets/images/98CC7795.jpg" alt="" class="img-fluid">
									<p class="name">Naomi Neo</p>
									<div class="txt">
										Influencer • Instagram Influencer • YouTube Content Creator • Blogger
									</div>
									<div class="item-bottom">
										<span>Singapore, Central Singapore</span>
									</div>
								</router-link>
							</div>
							<!-- 6 -->
							<div class="group-item group-item-first">
								<router-link to="/personPage?id" class="pr">
									<img src="../assets/images/98CC7795.jpg" alt="" class="img-fluid">
									<p class="name">Naomi Neo</p>
									<div class="txt">
										Influencer • Instagram Influencer • YouTube Content Creator • Blogger
									</div>
									<div class="item-bottom">
										<span>Singapore, Central Singapore</span>
									</div>
								</router-link>
							</div>
							<!-- 7 -->
							<div class="group-item group-item-first">
								<router-link to="/personPage?id" class="pr">
									<img src="../assets/images/98CC7795.jpg" alt="" class="img-fluid">
									<p class="name">Naomi Neo</p>
									<div class="txt">
										Influencer • Instagram Influencer • YouTube Content Creator • Blogger
									</div>
									<div class="item-bottom">
										<span>Singapore, Central Singapore</span>
									</div>
								</router-link>
							</div>
							<!-- 8 -->
							<div class="group-item group-item-first">
								<router-link to="/personPage?id" class="pr">
									<img src="../assets/images/98CC7795.jpg" alt="" class="img-fluid">
									<p class="name">Naomi Neo</p>
									<div class="txt">
										Influencer • Instagram Influencer • YouTube Content Creator • Blogger
									</div>
									<div class="item-bottom">
										<span>Singapore, Central Singapore</span>
									</div>
								</router-link>
							</div>
							<!-- 9 -->
							<div class="group-item group-item-first">
								<router-link to="/personPage?id" class="pr">
									<img src="../assets/images/98CC7795.jpg" alt="" class="img-fluid">
									<p class="name">Naomi Neo</p>
									<div class="txt">
										Influencer • Instagram Influencer • YouTube Content Creator • Blogger
									</div>
									<div class="item-bottom">
										<span>Singapore, Central Singapore</span>
									</div>
								</router-link>
							</div>
							<!-- end -->
						</div>
					</div>

				</div>
				<!-- <div class="colset"> -->
				<div class="col-md-5 col-sm-12">
					<div class="item-right">
						<div class="item">
							<div class="item-icon">
								<div><img src="../assets/images/jiaocha.svg" alt=""></div>
								<div><img src="../assets/images/share.svg" alt=""></div>
							</div>
							<div class="txt">
								<h3>NAOMI NEO</h3>
							</div>
						</div>
						<!-- <iframe  src="mobg.svg" alt="" width="543px" height="149px" border="none"></iframe> -->
						<div class="d-flex justify-content-between align-items-center item-cont">
							<div class="d-flex align-items-center d-avator">
								<img src="../assets/images/avator.png" alt="" class="img-fluid">
								<div class="name-cont pl">
									<p class="name">Naomi Neo</p>
									<p class="country">Naomi Neo</p>
									<img src="../assets/images/dingwei.svg" alt=""><span>SIngapore</span>
								</div>
							</div>
							<div class="p-right d-flex">
								<a href="">
									<img src="../assets/images/shizi.svg" alt="" class="img-fluid">
								</a>
								<a href="">
									<img src="../assets/images/beibao.svg" alt="" class="img-fluid">
								</a>
								<!-- <button type="button" class="btn btn-danger">Requst a qoute</button> -->
								<!--  -->
								<button type="button" class="btn btn-danger btn-lg btn-prm" data-toggle="modal" data-target="#myModal">
									Requst a qoute
								</button>
								<!-- Modal -->
								<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
									<div class="modal-dialog" role="document">
										<div class="modal-content">
											<div class="modal-header">
												<!-- <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> -->
												<h4 class="modal-title" id="myModalLabel">Modal title</h4>
											</div>
											<div class="modal-body">
												<form>
													<div class="form-group">
														<label for="exampleInputEmail1">Email address</label>
														<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
													</div>
													<div class="form-group">
														<label for="exampleInputPassword1">Password</label>
														<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
													</div>
												</form>
											</div>
											<div class="modal-footer">
												<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
												<button type="button" class="btn btn-danger">Save changes</button>
											</div>
										</div>
									</div>
								</div>
								<!--  -->
							</div>
						</div>
						<div class="view-profile d-flex justify-content-between">
							<p></p>
							<p style="padding:0 20px 5px 0">view-profile</p>
						</div>
						<!-- About -->
						<div class="profile-about">
							<h3 class="p-title">About</h3>
							<div class="pro-content">
								<span>Naomi Neo is a well-known name in the blogging and influencer industry and has a wikipage dedicated to
									her. She started blogging professionally in 2011 and has been uploading YouTube videos since 2012...</span>
								<p style="color: #F15D46;padding-top: 5px;">View Profile</p>
							</div>
						</div>
						
					</div>

				</div>
				<!-- </div> -->

			</div>
			<!-- 最下面得内容 -->
			<div class="row bt">
				<div class="group-list-second pr">
					<!-- 1 -->
					<div class="group-item group-item-second">
						<img src="../assets/images/98CC7795.jpg" alt="" class="img-fluid">
						<p class="name">Naomi Neo</p>
						<div class="txt">
							Influencer • Instagram Influencer • YouTube Content Creator • Blogger
						</div>
						<div class="item-bottom">
							<span>Singapore, Central Singapore</span>
						</div>
					</div>
					<!-- 2 -->
					<div class="group-item group-item-second">
						<img src="../assets/images/98CC7795.jpg" alt="" class="img-fluid">
						<p class="name">Naomi Neo</p>
						<div class="txt">
							Influencer • Instagram Influencer • YouTube Content Creator • Blogger
						</div>
						<div class="item-bottom">
							<span>Singapore, Central Singapore</span>
						</div>
					</div>
					<!-- 3 -->
					<div class="group-item group-item-second">
						<img src="../assets/images/98CC7795.jpg" alt="" class="img-fluid">
						<p class="name">Naomi Neo</p>
						<div class="txt">
							Influencer • Instagram Influencer • YouTube Content Creator • Blogger
						</div>
						<div class="item-bottom">
							<span>Singapore, Central Singapore</span>
						</div>
					</div>
					<!-- 4 -->
					<div class="group-item group-item-second">
						<img src="../assets/images/98CC7795.jpg" alt="" class="img-fluid">
						<p class="name">Naomi Neo</p>
						<div class="txt">
							Influencer • Instagram Influencer • YouTube Content Creator • Blogger
						</div>
						<div class="item-bottom">
							<span>Singapore, Central Singapore</span>
						</div>
					</div>
					<!-- 5 -->
					<div class="group-item group-item-second">
						<img src="../assets/images/98CC7795.jpg" alt="" class="img-fluid">
						<p class="name">Naomi Neo</p>
						<div class="txt">
							Influencer • Instagram Influencer • YouTube Content Creator • Blogger
						</div>
						<div class="item-bottom">
							<span>Singapore, Central Singapore</span>
						</div>
					</div>
				</div>
			</div>

		</div>
	</div>
</template>

<script>
	export default {}
</script>

<style lang="scss" scoped="scoped">
	a {
		color: #2c3e50;
		text-decoration: none;
	}
	.warper {
		padding: 43px 0 80px 0;
		width: 100%;
		height: auto;
		background-color: #F4F4F4;
	}

	.pr {
		padding-left: 0;
	}
	
	.pl{
		padding-left: 10px;
	}
	
	.group-item {
		border-radius: 5px;
		background-color: #fff;
		text-align: center;
		margin-bottom: 12px;
		padding: 0;
		.txt {
			padding: 5px 10px;
			font-size: 12px;
			color: #8C7F94;
		}
		
		.name{
			padding-top: 10px;
			font-weight: bold;
		}

		img {
			display: block;
			width: 100%;
			border-top-left-radius: 5px;
			border-top-right-radius: 5px;
		}
	}
	
	.group-list-first {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
	}
	
	.group-item-first {
		// width: 19px;
		margin: 0 5px 10px 5px;
	}
	
	.flex-item img {
		display: block;
		width: 100%;
	}
	
	@media screen and (min-width:1380px) and (max-width:1920px) {
		.group-item-first {
			width: 32%;
			/* flex: 1; */
		}
	}

	@media screen and (min-width:1200px) and (max-width:1380px) {
		.group-item-first {
			width: 32%;
			/* flex: 1; */
		}
	}
	
	@media screen and (min-width:375px) and (max-width:1200px) {
		.group-item-first {
			width: 47%;
			/* flex: 1; */
		}
	}
	
	
	.item-bottom{
		background: url(../assets/images/address.png) no-repeat;
		background-size: 12px 13px;
		background-position: 14px 30px;
		padding-top: 24px;
		padding-bottom: 10px;
		position: relative;
		span{
			font-size: 12px;
			color: #8C7F94;
		}
	}
	
	.item-bottom::after{
		content: '';
		position: absolute;
		left: 0;
		top: 20px;
		background-color: lightgray;
		height: 1px;
		width: 100%;
	}
	
	.item-right {
		height: auto;
		background-color: #fff;
		margin-bottom: 5px;
		margin-left: -10px;
		padding-bottom: 20px;
	}
	
	@media screen and (max-width:768px) {
		.pr {
			padding-right: 10;
		}
		.item-right{
			margin-left: 0;
		}
	}
	
	.d-avator{
		padding: 10px;
		>img{
			display: block;
			height: 42px;
			width: 42px;
			margin-top: -20px;
		}
	}
	.name-cont {
		.name{
			font-size: 14px;
			font-weight: bold;
		}
		.country{
			font-size: 12px;
		}
		>span{
			font-size: 12px;
		}
		>img{
			display: inline-block;
			width: 9.92px;
			height: 7.64px;
		}
	}
	.item-cont {
		width: 100%;

		div {
			width: 50%;
		}
	}

	.item-right .item {
		width: 100%;
		// height: 149px;
		text-align: center;
		background: url(../assets/images/mobg.png) center no-repeat;
		background-size: 100% 100%;
		border-top-left-radius: 5px;
		border-top-right-radius: 5px;

		.txt {
			color: yellow;
		}
	}
	
	.p-title{
		font-size: 14px;
		font-weight: bold;
	}
	
	.item-icon {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 15px;

		div {
			height: 25px;
			width: 25px;
			line-height: 40px;
			text-align: center;
			background-color: lightgray;
			border-radius: 50%;
			img{
				display: block;
			}
		}
	}
	
	.p-right {
		height: 33.667px;
		// width: 134.072px;
		a{
			display: flex;
			background-color: #F4F4F4;
			height: 33.667px;
			width: 33.667px;
			justify-content: center;
			align-items: center;
			margin-right: 5px;
			img {
				display: block;
				height: 17.35px;
				width: 16.238px;
				
			}
		}
		
		.btn-danger {
			background-color: #F15D46;
			margin-left: 15px;
			font-size: 10px;
			line-height: 20px;
			outline: none;
			border: none;
		}
	}

	.profile-about {
		padding: 14px 0 10px 15px;
		font-size: 12px;
		word-break: break-all;
		text-align: none;
		// width: 100%;
		border-radius: 5px;
		// height: 141px;
		margin: 0 20px;
		background-color: #f4f4f4;
		position: relative;

		p {
			font-size: 10px;
		}

		&::after {
			// float: left;
			content: '';
			// text-align: center;
			position: absolute;
			top: 36px;
			left: 10px;
			width: 96%;
			height: 1px;
			background-color: lightgray;
		}
	}
	
	.pro-content{
		padding-top: 14.44px;
		span{
			padding-top: 26.58px;
			line-height: 20.33px;
		}
	}
	
	
	.s-title{
		padding: 10px 0 0 15px;
	}
	.servies-item {
		margin-top: 10px;
		padding: 10px;

		img {
			display: block;
			width: 100%;
		}
	}
	
	.s-cont {
		line-height: 24px;
		display: flex;
		flex-direction: column;
		p {
			// margin-bottom: 10px;
			font-size: 14px;
			span {
				color: #F15D46;
			}
		}
	
		.name {
			margin-top: 22px;
		}
	
		.country {
			color: #F15D46;
		}
	}
	
	.b-cont-item {
		width: 100vw;

		div {
			text-align: center;
			width: 19.5%;
			background-color: #fff;

			img {
				display: block;
				width: 100%;
				// margin-
			}
		}
	}
	
	.group-list-second{
		display: flex;
		flex-wrap: wrap;
		width: 100%;
	}
	.group-item-second {
		// width: 19px;
		margin: 0 5px 10px 5px;
	}
	@media screen and (min-width:1380px) and (max-width:1920px) {
		.group-item-second {
			width: 19%;
			/* flex: 1; */
		}
	}
	@media screen and (min-width:1200px) and (max-width:1380px) {
		.group-item-second {
			width: 19%;
			/* flex: 1; */
		}
	}
	
	@media screen and (min-width:992px) and (max-width:1200px) {
		.group-item-second {
			width: 23.333%;
			/* flex: 1; */
		}
	}
	
	@media screen and (min-width:768px) and (max-width:992px) {
		.group-item-second {
			width: 32%;
			/* flex: 1; */
		}
	}
	
	@media screen and (min-width:375px) and (max-width:768px) {
		.group-item-second {
			width: 47%;
			/* flex: 1; */
		}
	}
</style>
